<script setup lang="ts">
import { ref } from 'vue'
import type { Ref } from 'vue'
import { useRouter } from 'vue-router';
const router = useRouter()

const chosenAddressId: Ref<string> = ref('1');
interface IPro {
    id: string,
    name: string,
    tel: string,
    address: string,
    isDefault: boolean,

}
const list: Ref<IPro[]> = ref([
    {
        id: '1',
        name: '张三',
        tel: '13000000000',
        address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室',
        isDefault: true,
    }
]
)
const disabledList: Ref<IPro[]> = ref([
    {
        id: '3',
        name: '王五',
        tel: '1320000000',
        address: '浙江省杭州市滨江区江南大道 15 号',
        isDefault: false,
    }
])
// 新增地址
function onAdd (){
    router.push('/address/addaddress')
}
// 编辑地址
function onEdit(){
    router.push('/address/changeaddress')
} 
</script>
<template>
    <div>
        <header>
            <span>
                地址列表
            </span>
            <van-icon name="arrow-left" size="20" class="back" @click="$router.push('/wode/mylist')"/>
        </header>
        <van-address-list v-model="chosenAddressId" :list="list" :disabled-list="disabledList" disabled-text="以下地址超出配送范围"
            default-tag-text="默认" @add="onAdd" @edit="onEdit" />
    </div>
</template>
<style lang="scss">
header{
    width: 100%;
    height: 0.44rem;
    line-height: 44px;
    text-align: center;
    font-size: 16px;
    border-bottom:  1px solid rgb(236, 236, 236);

}
.back{
    position: fixed;
    left: 10px;
    line-height: 44px;

}
</style>